{% extends 'base/base.html' %}
{% load static %}

{% block Title %}个人中心{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/user-styles.css' %}">
<style>
.head{
    width: 120px;
    height: 120px;
    border: 4px solid #667eea;
    border-radius: 50%;
    background: url("{{ request.user.head.url }}") no-repeat center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}
.head:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.head input{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.head::after {
    content: '📷';
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(102, 126, 234, 0.9);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
</style>
{% endblock %}

{% block main %}
<div class="user-center">
    <div class="center-container">
        <div class="center-header">
            <h1>🎵 个人中心</h1>
            {% if request.GET.success %}
                <div class="alert alert-success" style="margin-top: 20px;">
                    <strong>✅ 保存成功！</strong> 您的个人信息已更新。
                </div>
            {% endif %}
        </div>

        <form action="" method="post" enctype="multipart/form-data">
         {% csrf_token %}
            <div class="user-info">
                <div class="head" id="avatar-display" style="background-image: url('{{ request.user.head.url }}');">
                    <input type="file" name="head" id="id_head" accept="image/*">
                </div>
                <div class="user-details">
                    <h3>{{ request.user.username }}</h3>
                    <p>{{ request.user.email }}</p>
                </div>
            </div>
            
            <div class="form-group">
                <label for="id_username">用户名</label>
                <input type="text" name="username" id="id_username" class="form-control" value="{{ request.user.username }}" placeholder="请输入用户名" required>
                {% if form.username.errors %}
                    {% for error in form.username.errors  %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="form-group">
                <label for="id_head">头像</label>
                <p class="text-muted">点击头像区域选择新头像</p>
                {% if form.head.errors %}
                    {% for error in form.head.errors  %}
                        <p class="text-danger">{{ error }}</p>
                    {% endfor %}
                {% endif %}
            </div>
            
            <div class="auth-buttons">
                <button type="submit" class="btn-primary">💾 保存修改</button>
                <a href="{% url 'user:change_password' %}" class="btn-secondary">🔒 修改密码</a>
            </div>
        </form>

        <div class="feature-cards">
            <div class="feature-card">
                <h4>🎵 我的喜欢</h4>
                <p>查看您收藏的音乐</p>
                <a href="{% url 'main:LoveListView' %}">查看收藏</a>
            </div>
            <div class="feature-card">
                <h4>🔒 安全设置</h4>
                <p>修改密码和安全信息</p>
                <a href="{% url 'user:change_password' %}">安全设置</a>
            </div>
            <div class="feature-card">
                <h4>🏠 返回首页</h4>
                <p>回到音乐播放器主页</p>
                <a href="{% url 'main:index' %}">回到首页</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
window.onload = function (){
    let head_input = document.querySelector(".head input");
    let head = document.querySelector(".head");
    
    // 页面加载时更新头像显示
    function updateAvatarDisplay() {
        const avatarUrl = "{{ request.user.head.url }}";
        if (avatarUrl) {
            head.style.backgroundImage = `url(${avatarUrl})`;
        }
    }
    
    // 初始化头像显示
    updateAvatarDisplay();
    
    head_input.onchange = function (){
        if (this.files && this.files[0]) {
            const fileReader = new FileReader()
            fileReader.onload = function (e){
                head.style.backgroundImage = `url(${e.target.result})`;
            }
            fileReader.readAsDataURL(head_input.files[0])
        }
    }
}
</script>
{% endblock %}